<template>
  <div id="app">
    <!-- qup工单视图 -->
    <keep-alive :include="['OtherOrder','officeOrder']">
      <router-view name="qup" />
    </keep-alive>
    <router-view />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Vue from 'vue'
export default {
  name: 'App',
  mounted() {
    // 如果不是外部系统，则监听message
    if (!this.$route.meta.external) {
      return
    }
    // iframe传值
    const _this = this
    if (window.postMessage) {
      var callback = function(ev) {
        if (ev.data.flag === 'addtag') {
          const query = ev.data.extraData.query ? ev.data.extraData.query : ''
          const menuCode = ev.data.extraData.menuCode ? `&menuCode=${ev.data.extraData.menuCode}` : ''
          _this.$router.push(`/myiframe/urlPath?src=${ev.data.extraData.url}&name=${ev.data.extraData.title}${menuCode}${query}`)
        }
        if (ev.data.flag === 'closetag') {
          if (!_this.$route.meta.affix) {
            _this.closeIframeModal()
            _this.$store.dispatch('tagsView/delView', _this.$route).then(({ visitedViews }) => {
              const latestView = _this.$store.state.tagsView.visitedViews.slice(-1)[0]
              if (latestView) {
                _this.$router.push(latestView)
              } else {
                _this.$router.push('/')
              }
            })
          }
        }
        if (ev.data.flag === 'refreshPage') {
          if (document.getElementById(ev.data.extraData.url)) {
            document.getElementById(ev.data.extraData.url).contentWindow.refreshData(ev.data.extraData.params)
          }
        }
        if (ev.data.flag === 'refreshToken') {
          _this.$store.dispatch('user/RefreshToken').then(() => {
            _this.$message({
              message: '身份验证已刷新，请重新操作',
              type: 'warning',
              duration: 1500,
              onClose: function() {
                const iframes = document.getElementsByTagName('iframe')
                if (iframes && iframes.length) {
                  for (var i = 0; i < iframes.length; i++) {
                    iframes[i].contentWindow.resetToken && iframes[i].contentWindow.resetToken()
                  }
                }
              }
            })
          }).catch(() => {
            _this.$store.dispatch('user/resetToken').then(() => {
              _this.$message({
                message: '身份验证错误，请重新登录',
                type: 'error',
                duration: 1500,
                onClose: function() {
                  window.location.href = '/'
                }
              })
            })
          })
        }
      }
      if ('addEventListener' in document) {
        window.addEventListener('message', callback, false)
      } else if ('attachEvent' in document) {
        window.attachEvent('onmessage', callback)
      }
    }
  },
  methods: {
    // 关闭iframe全局遮罩
    closeIframeModal() {
      document.getElementById('main-modal-popup-top').className = 'main-popup-modal-top animated fadeOut'
      if (this.$store.state.app.sidebar.opened) {
        document.getElementById('main-modal-popup-left').className = 'main-popup-modal-left animated fadeOut'
      } else {
        document.getElementById('main-modal-popup-left').className = 'main-popup-modal-left slide-close animated fadeOut'
      }
      setTimeout(() => {
        document.getElementById('main-modal-popup-top').style.display = 'none'
        document.getElementById('main-modal-popup-left').style.display = 'none'
      }, 300)
    }
  },
  computed: {
    ...mapGetters(['callPlatform'])
  },
  watch: {
    // 设置话务条
    callPlatform: {
      handler(v) {
        if (!v) {
          v = '01'
        }
        if (!this.$cps || this.$cps.callPlatform !== v) {
          Vue.prototype.$cps = this[`$cps${v}`] ?? ''
          Vue.prototype.$callProxyService = this[`$callProxyService${v}`] ?? ''
        }
      },
      immediate: true
    }
  }
}
</script>

